import "./App.css";
import React from "react";
class DataSource {
  constructor() {
    this.data = "NBA篮球报";
    // 订阅者
    this.listener = [];
  }
  // 订报纸
  addChangeListener(callback) {
    this.listener.push(callback);
  }
  // 发布消息
  publish() {
    // 每次发布的时候都更新data
    let data = this.getData();
    for (let i = 0; i < this.listener.length; i++) {
      // 对应每一个订报纸的人
      const listener = this.listener[i];
      listener(data);
    }
  }
  // 取消订阅
  removeChangeListener(callback) {
    let index = this.listener.indexOf(callback);
    console.log(index);
    this.listener.splice(index, 1);
  }
  // 主动获取最新的报纸内容
  // 提供订阅者方法，让订阅者知道最新的报纸是什么
  getData() {
    return this.data;
  }
}
let test = new DataSource();
console.log(test.getData());
class CommentList extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      // 假设 "DataSource" 是个全局范围内的数据源变量
      // 获取今天有哪些评论
      comments: test.getData(),
    };
  }

  componentDidMount() {
    // 订阅更改
    test.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    // 清除订阅
    test.removeChangeListener(this.handleChange);
  }

  handleChange() {
    // 当数据源更新时，更新组件状态
    this.setState({
      comments: test.getData(),
    });
  }

  render() {
    return <div>{this.state.comments.toString()}</div>;
  }
}

export default CommentList;
